import type { User } from "@/hooks/useUser"
import { formatDistanceToNow } from "date-fns"
import { generateAvatar } from "@/utils/avatar"

type ChatMessageProps = {
  content: string
  timestamp: string
  user: {
    nickname: string
    avatarSeed: string
  }
  currentUser: User | null
}

export default function ChatMessage({ content, timestamp, user, currentUser }: ChatMessageProps) {
  console.debug(user, currentUser)
  const isCurrentUser = currentUser?.id === user.id
  const formattedTime = formatDistanceToNow(new Date(timestamp), { addSuffix: true })
  const avatarUrl = generateAvatar(user.avatarSeed || "default")

  return (
    <div className={`mb-2 text-sm ${isCurrentUser ? "text-right" : "text-left"}`}>
      <div className={`flex items-center gap-1 ${isCurrentUser ? "justify-end" : ""}`}>
        {!isCurrentUser && (
          <img src={avatarUrl || "/placeholder.svg"} alt="Avatar" width={16} height={16} className="mr-1" />
        )}
        <span className={`font-bold ${isCurrentUser ? "text-[#000080]" : "text-[#008080]"}`}>{user.nickname}:</span>
        <span className="text-xs text-gray-600">{formattedTime}</span>
        {isCurrentUser && (
          <img src={avatarUrl || "/placeholder.svg"} alt="Avatar" width={16} height={16} className="ml-1" />
        )}
      </div>
      <div className={`pl-5 break-words ${isCurrentUser ? "pr-5 pl-0" : ""}`}>{content}</div>
    </div>
  )
}